<!-- 能源实绩 -->
<template>
    <div class="app-container">
        <div class="slider">
            <!-- <el-select
                v-model="energyType"
                size="small"
                placeholder="请选择能源类型"
                style="margin-bottom: 6px; width: 100%"
                @change="changeEnergyType"
            >
                <el-option
                    v-for="item in energyplanOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                />
            </el-select> -->

            <div class="bar-header">
              <el-form inline class="searchItem">
                <el-form-item label="能源类型">
                    <el-select
                        v-model="energyType"
                        filterable
                        placeholder="请选择能源类型"
                        transfer
                        style="width: 180px;"
                        @change="changeEnergyType"
                    >
                        <el-option
                            v-for="item in energyplanOptions"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code"
                        />
                    </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div style="flex: 1" class="bar-container">
                <BaseTree
                    :isSearch="true"
                    :data="treeData"
                    :expandClick="false"
                    @nodeClick="handleNodeClick"
                    :defaultProps="defaultProps"
                    :defaultExpandedkeys="expandedKey"
                    :currentNode="currentSelectNode"
                    :currentNodeKey="currentNodeKey"
                >
                </BaseTree>
            </div>
        </div>
        <div class="container-warpper">
            <div class="container-warpper-item">
                <GroupBox
                    title="能耗日历"
                    style="margin-right: 10px; flex-shrink: 2; height: 440px; min-width: 300px"
                >
                    <div slot="right" class="right">
                        <el-date-picker
                            v-model="monthValue"
                            type="month"
                            :clearable="false"
                            placeholder="选择月"
                            style="width: 100%"
                            @change="changeDate"
                            size="small"
                            value-format="yyyy-MM"
                            :picker-options="pickerOptions"
                        >
                        </el-date-picker>
                    </div>
                    <Calendar :source="source" :monthValue="monthValue" />
                </GroupBox>
                <GroupBox
                    title="能耗实绩评分"
                    style="margin-right: 10px; flex-shrink: 1; height: 440px"
                >
                    <div slot="right">
                        <el-tooltip class="item" effect="dark" placement="top-start">
                            <div slot="content"
                                >1.能源实绩值/能源计划=[95%,105%]，定义为优秀；<br />
                                2.能源实绩值/能源计划值=[0%,95%)U（105%,110%),定义为正常；<br />
                                3.能源实绩值/能源计划值=[110%,+∞),定义为超标；<br />
                                4.基准分值为100分，优秀每天+2分，超标每天-5分，正常每天不加减分；</div
                            >
                            <i class="el-icon-question" style="color: #537cb7"></i>
                        </el-tooltip>
                    </div>

                    <EnergyScore :source="energyScrore" />
                </GroupBox>
            </div>
            <div class="container-warpper-item">
                <Comparison :source="tableData" :unit="unit" />
            </div>
        </div>
    </div>
</template>

<script>
    import { findProjectSubitemTreeByEnergyType, findEnergySelect } from '@/api/common'
    import GroupBox from '@/components/GroupBox'
    import Calendar from './components/calendar'
    import EnergyScore from './components/energyScore'
    import Comparison from './components/Comparison'
    import dayjs from 'dayjs'
    import { findActualList } from '@/api/actualConsumption'
    import BaseTree from '@/components/BaseTree'

    export default {
        name: '',
        components: {
            GroupBox,
            Calendar,
            EnergyScore,
            Comparison,
            BaseTree,
        },
        data() {
            return {
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now()
                    },
                },
                unit: '',
                filterText: '',
                defaultProps: {
                    label: 'name',
                },
                treeData: [],
                expandedKey: [],
                energyplanOptions: [],
                currentNodeKey: '',
                energyType: '',

                monthValue: dayjs().format('YYYY-MM'),
                currentSelectNode: undefined,
                subItemId: undefined,
                source: {
                    goodList: [],
                    overList: [],
                    noneList: [],
                    normalList: [],
                    nullList: [],
                },
                tableData: [],
                energyScrore: {
                    score: '--',
                    validDays: '--',
                    goodCount: 0,
                    normalCount: 0,
                    overCount: 0,
                    noneCount: 0,
                    goodPercentage: 0,
                    normalPercentage: 0,
                    overPercentage: 0,
                    nonePercentage: 0,
                },
                STATUS_MENU: ['good', 'normal', 'over', 'none'],
            }
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val)
            },
        },
        created() {
            this.initData()
        },
        methods: {
            async initData() {
                // 能源类型
                const { data: energyOptions } = await findEnergySelect(this.$store.state.projectId)
                this.energyplanOptions = energyOptions
                this.energyType = this.getDefaultFirst(energyOptions)
                this.unit = this.energyplanOptions[0].unit

                // 分项树
                this.getSubItemTree()
                // this.getData()
            },
            getSubItemTree() {
                findProjectSubitemTreeByEnergyType({
                    projectId: this.$store.state.projectId,
                    energyType: this.energyType,
                }).then((resp) => {
                    const { data } = resp
                    if (data && data.length) {
                        this.treeData = data
                        const id = data[0].id
                        this.expandedKey = [id]
                        this.currentSelectNode = { id }
                        this.subItemId = data[0].parentId == -1 ? '' : data[0].id
                        this.currentNodeKey = id
                        this.getData()
                    } else {
                        this.treeData = []
                    }
                })
            },
            //
            changeEnergyType() {
                this.unit = this.energyplanOptions.find((res) => {
                    return res.code == this.energyType
                })?.unit
                this.getSubItemTree()
            },
            //获取数据
            getData() {
                this.source.goodList = []
                this.source.normalList = []
                this.source.overList = []
                this.source.nullList = []
                const params = {
                    energyTypeCode: this.energyType,
                    time: this.monthValue,
                    subitemId: this.subItemId,
                    projectId: this.$store.state.projectId,
                }
                findActualList(params).then((res) => {
                    const { code, data = {} } = res
                    if (code === 200) {
                        const { calendarDataList = [], actualDetailList = [], score = '--' } = data
                        this.source.goodList = calendarDataList
                            .map((item) => {
                                if (item.status === this.STATUS_MENU[0]) {
                                    return item.time
                                }
                            })
                            .filter((item) => {
                                return item
                            })
                        this.source.normalList = calendarDataList
                            .map((item) => {
                                if (item.status === this.STATUS_MENU[1]) {
                                    return item.time
                                }
                            })
                            .filter((item) => {
                                return item
                            })
                        this.source.overList = calendarDataList
                            .map((item) => {
                                if (item.status === this.STATUS_MENU[2]) {
                                    return item.time
                                }
                            })
                            .filter((item) => {
                                return item
                            })
                        this.source.noneList = calendarDataList
                            .map((item) => {
                                if (item.status === this.STATUS_MENU[3]) {
                                    return item.time
                                }
                            })
                            .filter((item) => {
                                return item
                            })
                        this.source.nullList = calendarDataList
                            .map((item) => {
                                if (!item.status) {
                                    return item.time
                                }
                            })
                            .filter((item) => {
                                return item
                            })
                        this.tableData = actualDetailList
                        this.energyScrore.goodCount = this.source.goodList.length
                        this.energyScrore.normalCount = this.source.normalList.length
                        this.energyScrore.overCount = this.source.overList.length
                        this.energyScrore.noneCount = this.source.noneList.length
                        this.energyScrore.score = score
                        this.energyScrore.validDays =
                            this.energyScrore.goodCount +
                            this.energyScrore.normalCount +
                            this.energyScrore.overCount +
                            this.energyScrore.noneCount

                        this.energyScrore.goodPercentage = this.percentage(
                            this.energyScrore.goodCount,
                            calendarDataList.length
                        )
                        this.energyScrore.overPercentage = this.percentage(
                            this.energyScrore.overCount,
                            calendarDataList.length
                        )
                        this.energyScrore.normalPercentage = this.percentage(
                            this.energyScrore.normalCount,
                            calendarDataList.length
                        )
                        this.energyScrore.nonePercentage = this.percentage(
                            this.energyScrore.noneCount,
                            calendarDataList.length
                        )
                    }
                })
            },
            //计算占比
            percentage(value, total) {
                return total === 0 ? 0 : Number((value * 100) / total)
            },
            changeDate() {
                this.getData()
            },
            getDefaultFirst(data) {
                let result = ''
                if (data && data.length) {
                    result = _.head(data).code
                }
                return result
            },
            handleNodeClick(data, node) {
                this.currentSelectNode = data.data
                this.subItemId = data.data.parentId == -1 ? '' : data.data.id
                this.getData()
            },
            filterNode(value, data) {
                if (!value) return true
                return data.name.indexOf(value) !== -1
            },
        },
    }
</script>

<style lang="scss" scoped>
    .app-container {
        display: flex;
        min-width: 1000px;
        height: 100%;

        .slider {
            // width: 220px;
            width: 285px;
            margin-right: 12px;
            // background: $nav-bar-bg-color;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow-y: auto;

            .bar-header {
                padding: 20px 10px;
                margin-bottom: 15px;
                background: linear-gradient(90deg, rgba(5, 59, 128, 1), rgba(1, 22, 57, 1));
                box-shadow: 0px 4px 8px 0px rgba(0,17,46,0.5);
                border: 1px solid rgba(0, 144, 242, 0.58); 
                border-radius: 10px;
                .searchItem {
                    display: flex;
                    justify-content: center;
                }
            }
            .bar-container {
                flex: 1;
                // height: calc(100vh - 220px);
                overflow-y: auto;
                padding: 0 10px;
                background: linear-gradient(90deg, rgba(5, 59, 128, 1), rgba(1, 22, 57, 1));
                box-shadow: 0px 4px 8px 0px rgba(0,17,46,0.5);
                border: 1px solid rgba(0, 144, 242, 0.58); 
                border-radius: 10px;
            }
        }
        .container-warpper {
            flex: 1;
            overflow-y: auto;

            .container-warpper-item {
                display: flex;
                justify-content: space-between;
                padding-bottom: 20px;
                .right {
                    width: 140px;
                    color: #fff;
                }
                ::v-deep .group-box .header {
                    padding: 15px !important;
                }
            }
        }
    }
</style>
